import React from 'react'
import '../../layer.css'
import {Button, Input, Grid, Loading, Icon} from "@hi-ui/hiui";
import ReactECharts from "echarts-for-react";
import {loadItemRecommendDataFirst, loadUserRecommendDataFirst, getFinalRecommend} from "../../action";
import {messageModal} from "../../../../common/date";

const {Row, Col} = Grid

const precisiondata = [
    ['product', 'N=5', 'N=10', 'N=15'],
    ['a=0.1', 0.034, 0.024, 0.0213],
    ['a=0.2', 0.034, 0.024, 0.0213],
    ['a=0.3', 0.034, 0.024, 0.0213],
    ['a=0.4', 0.034, 0.025, 0.024],
    ['a=0.5', 0.066, 0.0509, 0.0606],
    ['a=0.6', 0.106, 0.1349, 0.1486],
    ['a=0.7', 0.109, 0.1379, 0.1526],
    ['a=0.8', 0.109, 0.1379, 0.1526],
    ['a=0.9', 0.109, 0.1379, 0.1526],
]

const recalldata = [
    ['product', 'N=5', 'N=10', 'N=15'],
    ['a=0.1', 0.00850, 0.01200, 0.01600],
    ['a=0.2', 0.00850, 0.01200, 0.01600],
    ['a=0.3', 0.00850, 0.01200, 0.01600],
    ['a=0.4', 0.00850, 0.01250, 0.01800],
    ['a=0.5', 0.01500, 0.02549, 0.04549],
    ['a=0.6', 0.02649, 0.06749, 0.11150],
    ['a=0.7', 0.02749, 0.06899, 0.11449],
    ['a=0.8', 0.02749, 0.06899, 0.11449],
    ['a=0.9', 0.02749, 0.06899, 0.11449],
]

class FinalMoel extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userId: '',
            venueId: '',
            topK: 5,
            diffData: [],
            loadingBtn: false,
            backgroundColor1: '#fa7a84',
            backgroundColor2: '#fa7a84',
            precision: [],
            recall: []
        }
    }


    async componentDidMount() {
        this.loadRecommendDataFirst()
    }

    loadRecommendData() {
        const {userId, venueId, topK} = this.state
        if (userId && venueId && topK) {
            this.setState({
                loadingBtn: true
            })
            getFinalRecommend({userId, venueId, topK}).then(res => {
                console.log(res)
                if (res.code === 200) {
                    var list = res.data
                    var data = []
                    for (let i = 0; i < list.length; i++) {
                        var list1 = list[i]
                        for (let j = 0; j < list1.list.length; j++) {
                            data.push({
                                type: list1.type,
                                value: [list1.list[j][0], list1.list[j][1]]
                            })
                        }
                    }
                    console.log(data)
                    this.setState({
                        diffData: data
                    })
                }
            }).finally((r) => {
                this.setState({
                    loadingBtn: false
                })
            })
        } else {
            messageModal('error', '相关参数前填写完整')
        }

    }

    loadRecommendDataFirst() {
        loadItemRecommendDataFirst().then(res => {
            if (res.code === 200) {
                this.setState({
                    backgroundColor2: '#35a55d'
                })
            }
        })
        loadUserRecommendDataFirst().then(res => {
            if (res.code === 200) {
                this.setState({
                    backgroundColor1: '#35a55d'
                })
            }
        })
    }

    loadUserDiffChart() {
        const {diffData} = this.state

        return {
            bmap: {
                center: [-73.9792, 40.7695],
                zoom: 11,
                roam: true,
                mapStyle: {
                    styleJson: [
                        {
                            featureType: 'water',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'land',
                            elementType: 'all',
                            stylers: {
                                color: '#f3f3f3'
                            }
                        },
                        {
                            featureType: 'railway',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'highway',
                            elementType: 'all',
                            stylers: {
                                color: '#fdfdfd'
                            }
                        },
                        {
                            featureType: 'highway',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'geometry',
                            stylers: {
                                color: '#fefefe'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#fefefe'
                            }
                        },
                        {
                            featureType: 'poi',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'green',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'subway',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'manmade',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'local',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'boundary',
                            elementType: 'all',
                            stylers: {
                                color: '#fefefe'
                            }
                        },
                        {
                            featureType: 'building',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'label',
                            elementType: 'labels.text.fill',
                            stylers: {
                                color: '#999999'
                            }
                        }
                    ]
                }
            },
            series: [
                {
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: diffData,
                    itemStyle: {
                        color: function (params) {
                            var ty = params.data.type
                            if (ty === 'self')
                                return '#d41919';
                            else if (ty === 'wpr')
                                return '#03a739';
                            else
                                return '#b809e5';
                        }
                    }
                }
            ]
        }
    }

    loadAllPrecison() {
        const {precision} = this.state

        return {
            title: {
                text: '用户-地理 混合模型',
                subtext: '@Precison α相关范围'
            },
            grid: {
                y: 80,
                x2: 60
            },
            legend: {},
            tooltip: {},
            dataset: {
                source: precision
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        }
    }

    loadAllRecall() {
        const {recall} = this.state

        return {
            title: {
                text: '用户-地理 混合模型',
                subtext: '@Recall α相关范围'
            },
            grid: {
                y: 80,
                x2: 60
            },
            legend: {},
            tooltip: {},
            dataset: {
                source: recall
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        }
    }


    render() {
        const {userId, venueId, topK} = this.state

        return (
            <div className={'recommendationbody'}>
                <div className={'algorithmparam'}>
                    <Row justify='center' gutter={true}>
                        <Col>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                模拟用户
                            </Button>
                            <Input placeholder="输入模拟用户ID号"
                                   type={"tel"}
                                   clearable={true}
                                   value={userId}
                                   onChange={(e, val) => {
                                       this.setState({userId: val})
                                   }}
                                   bordered={false}
                                   style={{width: 200, height: 32, margin: 'auto 10px auto 10px'}}/>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                模拟地名
                            </Button>
                            <Input placeholder="输入模拟地名ID"
                                   type={"tel"}
                                   clearable={true}
                                   bordered={false}
                                   value={venueId}
                                   style={{width: 150, height: 32, margin: 'auto 10px auto 10px'}}
                                   onChange={(e, val) => {
                                       this.setState({venueId: val})
                                   }}/>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                推荐单数
                            </Button>
                            <Input placeholder="输入推荐数量"
                                   type={"tel"}
                                   clearable={true}
                                   bordered={false}
                                   value={topK}
                                   style={{width: 150, height: 32, margin: 'auto 10px auto 10px'}}
                                   onChange={(e, val) => {
                                       this.setState({topK: val})
                                   }}/>
                            <Button type="primary"
                                    loading={this.state.loadingBtn}
                                    onClick={() => {
                                        this.loadRecommendData()
                                    }}>
                                查询
                            </Button>
                        </Col>
                    </Row>
                </div>
                <div className={'userDiff'}>
                    <div>
                        <span style={{color: 'red'}}>红色标记点</span>
                        <span style={{color: 'green'}}>绿色普通推荐点</span>
                        <span style={{color: 'purple'}}>紫色增强推荐点</span>
                    </div>
                    <ReactECharts
                        style={{height: "350px"}}
                        option={this.loadUserDiffChart()}/>
                </div>
                <Row gutter={true}>
                    <Col span={12}>
                        <div className={'final_p_r'}>
                            <div style={{float: 'right', zIndex: 99, position: "relative"}}>
                                <Icon name="update" style={{color: '#3b953f', fontSize: '20px'}} onClick={() => {
                                    this.setState({
                                        precision: this.state.precision.length > 0 ? [] : precisiondata
                                    })
                                }}/>
                            </div>
                            <ReactECharts
                                // style={{height: "350px"}}
                                option={this.loadAllPrecison()}/>
                        </div>
                    </Col>
                    <Col span={12}>
                        <div className={'final_p_r'}>
                            <div style={{float: 'right', zIndex: 99, position: "relative"}}>
                                <Icon name="update" style={{color: '#3b953f', fontSize: '20px'}} onClick={() => {
                                    this.setState({
                                        recall: this.state.recall.length > 0 ? [] : recalldata
                                    })
                                }}/>
                            </div>
                            <ReactECharts
                                // style={{height: "350px"}}
                                option={this.loadAllRecall()}/>
                        </div>
                    </Col>
                </Row>
                <div className={'loadUserCahce'}
                     style={{width: '50%', float: 'left', backgroundColor: this.state.backgroundColor1}}/>
                <div className={'loadUserCahce'}
                     style={{width: '50%', float: 'left', backgroundColor: this.state.backgroundColor2}}/>
                <div style={{clear: 'both'}}/>
            </div>
        )
    }
}

export default FinalMoel

